<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layOut="http://www.w3.org/1999/xhtml"
      layOut:decorator="layOut/layOut">
<head>
    <title>用户配置角色</title>
</head>
<body>
<form class="layui-form" id="theForm">
    <div class="mainBox">
        <div class="main-container">
            <div th:each="item:${roleList}" class="layui-form-item">
                <label class="layui-form-label"><span th:text="${item.getName()}"></span></label>
                <div class="layui-input-block">
                    <input type="checkbox" th:if="${item.isChecked()}" checked th:name="${item.getValue()}" lay-skin="primary">
                    <input type="checkbox" th:if="${item.isChecked()} eq false" th:name="${item.getValue()}" lay-skin="primary">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom" th:fragment="theBtn">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="completeFilter">
                <i class="layui-icon layui-icon-ok"></i>提交
            </button>
        </div>
    </div>
</form>
<script type="text/javascript" th:inline="javascript">
    const id = [[${id}]];
</script>
<script type="text/javascript">
    layui.use(['form','jquery'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        form.on('submit(completeFilter)', function(data) {
            const field = data.field;
            var role = "";
            for(const key in field) {
                role += "," + key
            }
            if (role.length > 1) {
                role = role.substring(1)
            }
            $.post("/user/configRole/"+id+"/"+role, function (data) {
                if (data.status === 200) {
                    console.log("成功返回")
                }
                layer.msg(data.msg, {
                    icon: 1,       //信息框与加载层的私有参数
                    time: 1500     //意思是2.5秒后自动关闭
                }, function () {   //关闭弹出框后执行的函数
                    console.log("后端返回" + data.msg)
                });
            });
            return false;
        });
    })
</script>
</body>
</html>